<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<!-- 谷歌字体 更改了引入网址原本的加载很慢 再不行就下载到本地 -->
		<!-- <link
			href="https://fonts.font.im/css?family=Asap|Bungee|Fredoka+One|Palanquin+Dark|Tilt+Neon|Secular+One"
			rel="stylesheet"
		/> -->
		<link rel="stylesheet" href="./src/assets/fonts/googlefonts.css" />
		<!-- iconfont -->
		<!-- <link
			rel="stylesheet"
			href="http://at.alicdn.com/t/c/font_3832170_f23ryn3y5g.css"
		/> -->
		<!-- import View UI Plus stylesheet -->
		<!-- <link
			rel="stylesheet"
			href="https://unpkg.com/view-ui-plus/dist/styles/viewuiplus.css"
		/> -->
		<!-- import View UI Plus -->
		<!-- <script src="https://unpkg.com/view-ui-plus"></script> -->
		<title>Vue3 Template</title>

		<script>
			// 响应式和禁止缩放二选一即可
			// document.addEventListener(
			// 	'mousewheel',
			// 	function (e) {
			// 		e = e || window.event
			// 		if ((e.wheelDelta && event.ctrlKey) || e.detail) {
			// 			event.preventDefault()
			// 		}
			// 	},
			// 	{
			// 		capture: false,
			// 		passive: false,
			// 	}
			// )

			var responsive = function (doc, win) {
				// 创建样式表
				let style = document.createElement('style')
				style.type = 'text/css'

				var docEl = doc.documentElement,
					resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
					recalc = function () {
						var clientWidth = docEl.clientWidth
						if (!clientWidth) return
						//这里是假设在1920px宽度设计稿的情况下，1rem = 16px；

						// 可以根据实际需要修改（行内样式修改方式，优先级高有时候不好手动修改）
						// docEl.style.fontSize = 16 * (clientWidth / 1920) + 'px'

						// css类方式修改html根元素的font-size
						style.innerHTML = `
			              .R-FontSize{
			                  font-size: ${16 * (clientWidth / 1920) + 'px'};
			              }
			         `
						document.querySelector('head').appendChild(style)

						docEl.classList.add('R-FontSize')
					}

				if (!doc.addEventListener) return
				win.addEventListener(resizeEvt, recalc, false)
				doc.addEventListener('DOMContentLoaded', recalc, false)
			}

			// 执行监听
			responsive(document, window)
		</script>

		<!-- 判断是否需要加载x-sheet -->
		<link href="assets/sheet-dist/css/x-sheet.css" rel="stylesheet" />
		<script src="assets/sheet-dist/js/x-sheet.js"></script>
		<script></script>
	</head>
	<body>
		<div id="app"></div>
		<script type="module" src="/src/main.js"></script>
	</body>
	<style></style>
</html>
